<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>个人详情页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="referrer" content="no-referrer"/>
    <link rel="icon" href="images/Favicon.png">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="css/fontello.css">
    <link rel="stylesheet" type="text/css" href="css/fontello-codes.css">
    <link rel="stylesheet" type="text/css" href="css/thumbs-embedded.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link rel="stylesheet" type="text/css" href="css/color.css">


</head>

<body>

<div class="wrapper hp_1">

    <div id="app">
        <my-header></my-header>
    </div>

    <section class="user-account">
        <div class="container" id="videoDetails">
            <div class="row">
                <div class="col-lg-3">
                    <div class="sidebar">
                        <div class="widget video_info pr sp">
								<span class="vc_hd">
									<img :src="user.userImage" alt="">
								</span>
                            <h4>{{user.username}}</h4>
                            <p>since: Dec 17, 2017 </p>
                            <span>Last Login: 42 minutes ago</span>
                        </div>
                        <!--video_info pr-->
                        <div class="widget account">
                            <h2 class="hd-uc"><i class="icon-user"></i> Account</h2>
                            <ul>
                                <li><a href="#">更改密码</a></li>
                                <li><a href="#">更改个人信息</a></li>
                                <li><a href="#">管理订阅</a></li>
                            </ul>
                        </div>
                        <!--account end-->
                        <div class="widget notifications">
                            <h2 class="hd-uc"><i class="icon-notification"></i>Notifications</h2>
                            <a href="#" title="">Manage Notifications</a>
                        </div>
                        <!--notifications end-->
                        <div class="widget donation">
                            <h2 class="hd-uc"><i class="icon-donations"></i>Donations </h2>
                            <ul>
                                <li><a href="#">Manage Donations </a></li>
                                <li><a href="#">Add Credit</a></li>
                            </ul>
                        </div>
                        <!--donation end-->
                        <div class="widget chanel-pro">
                            <h2 class="hd-uc"><i class="icon-preferences"></i>Channel and Profile </h2>
                            <ul>
                                <li><a href="#"> Account Settings</a></li>
                                <li><a href="#"> Profile Settings </a></li>
                                <li><a href="#"> Change Avatar</a></li>
                            </ul>
                        </div>
                        <!--chanel-pro end-->
                        <div class="widget vid-ac">
                            <h2 class="hd-uc"><i class="icon-play"></i>影片</h2>
                            <ul>
                                <li><a href="Upload_Video.html">上载影片</a></li>
                                <li><a href="#">喜欢的影片</a></li>
                            </ul>
                        </div>
                        <!--vid-ac end-->
                        <div class="widget playlist">
                            <h2 class="hd-uc"><i class="icon-add_to_playlist"></i>Playlists </h2>
                            <span><a href="#"> Manage Playlists</a></span>
                        </div>
                        <!--playlist end-->
                        <div class="widget messages">
                            <h2 class="hd-uc"><i class="icon-message"></i> Messages</h2>
                            <ul>
                                <li><a href="#">New Message</a></li>
                                <li><a href="#"> Inbox (10)</a></li>
                                <li><a href="#"> Sent</a></li>
                            </ul>
                        </div>
                        <!--messages end-->
                        <div class="widget contacts">
                            <h2 class="hd-uc"><i class="icon-group"></i>Contacts</h2>
                            <ul>
                                <li><a href="#" title=""> Manage Contacts</a></li>
                                <li><a href="#" title="">Add Contact </a></li>
                            </ul>
                        </div><!-- Contacts  end-->
                    </div>
                    <!--sidebar end-->
                </div>
                <div class="col-lg-9">
                    <div class="video-details">
                        <div class="latest_vidz">
                            <div class="latest-vid-option">
                                <h2 class="hd-op"> Latest Videos</h2>
                                <a href="#" title="" class="op-1">Video Details</a>
                                <a href="#" title="" class="op-2"> Options</a>
                                <div class="clearfix"></div>
                            </div>
                            <!--latest-vid-option end-->
                            <div class="vidz_list">
                                <div class="tb-pr" v-for="(item,index) in videoInfo">
                                    <div class="row">
                                        <div class="col-xl-8 col-lg-9 col-md-9 col-sm-12">
                                            <div class="tab-history acct_page">
                                                <div class="videoo">
                                                    <div class="vid_thumbainl ms br">
                                                        <a href="Video_Page.html" title="">
                                                            <img :src="item.Image" alt="">
                                                            <span class="vid-time">{{item.durations}}</span>
                                                            <span class="watch_later">
																	<i class="icon-watch_later_fill"></i>
																</span>
                                                        </a>
                                                    </div>
                                                    <!--vid_thumbnail end-->
                                                    <div class="video_info ms br">
                                                        <h3><a href="Video_Page.html" title="">{{item.title}}</a>
                                                        </h3>
                                                        <h4><a href="Single_Channel_Home.html" title="">newfox
                                                            media</a> <span class="verify_ic"><i
                                                                class="icon-tick"></i></span></h4>
                                                        <span>686K views . {{item.create_time}}</span>
                                                        <ul>
                                                            <li><span class="br-1">Inactive</span></li>
                                                            <li><span class="br-2">Successful</span></li>
                                                        </ul>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </div>
                                                <!--videoo end-->
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-lg-3 col-md-3 col-sm-12">
                                            <div class="icon-list">
                                                <ul>
                                                    <li><a href="#" title=""><i class="icon-play"></i></a></li>
                                                    <li><a href="#" title=""><i class="icon-pencil"></i></a></li>
                                                    <li><a href="#" title=""><i class="icon-cancel"></i></a></li>
                                                </ul>
                                            </div>
                                            <!--icon-list end-->
                                        </div>
                                    </div>
                                </div>
                                <!--tb-pr end-->

                            </div>
                            <!--vidz_list end-->
                        </div>
                        <!--latest_vidz end-->


                        <div class="change-pswd">
                            <h2 class="hd-op">更改用户密码</h2>
                            <form>
                                <div class="ch-pswd">
                                    <input type="text" name="旧密码" placeholder="请输入旧密码">
                                </div>
                                <!--ch-pswd end-->
                                <div class="ch-pswd">
                                    <input type="text" name="新密码" placeholder="请输入新密码">
                                </div>
                                <!--ch-pswd end-->
                                <div class="ch-pswd">
                                    <input type="text" name="确认新密码"
                                           placeholder="请确认新密码">
                                </div>
                                <!--ch-pswd end-->
                                <div class="ch-pswd">
                                    <button type="submit">提交</button>
                                </div>
                                <!--ch-pswd end-->
                            </form>
                        </div>
                        <!--change-pswd end-->

                        <div class="account-details">
                            <div class="account_details_content">
                                <h2 class="hd-op"> 账户个人详情 </h2>
                                <h4 class="slct-hd">国家</h4>
                                <div class="slct_optz">
                                    <select class="choice" v-on:change="indexSelect($event)">　　
                                        <option v-for="item in index" v-bind:value="item.name">{{item.name}}</option>
                                    </select>
                                </div>
                                <h4 class="slct-hd"> 性别</h4>
                                <ul class="gend">
                                    <li>
                                        <div class="chekbox-lg">
                                            <label>
                                                <input type="radio" name="gender" v-model="gender" value="0">
                                                <b class="checkmark"></b>
                                                <span>男</span>
                                            </label>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="chekbox-lg">
                                            <label>
                                                <input type="radio" name="gender" v-model="gender" value="1">
                                                <b class="checkmark"> </b>
                                                <span>女</span>
                                            </label>
                                        </div>
                                    </li>
                                </ul>
                                <h4 class="slct-hd">昵称 </h4>
                                <div class="dob flatpickr">
                                    <input type="text" class="flatpickr-input"
                                           placeholder="请输入昵称" v-model="nickname">
                                </div>
                                <h4 class="slct-hd">出生日期 </h4>
                                <div class="dob flatpickr">
                                    <input type="number" name="date" class="flatpickr-input"
                                           placeholder="请选择出生日期" data-input>
                                    <a href="#" title="" class="arw_vz">
                                        <i class="icon-arrow_below"></i>
                                    </a>
                                </div>
                                <h4 class="slct-hd">手机号 </h4>
                                <div class="dob flatpickr">
                                    <input type="text" class="flatpickr-input"
                                           placeholder="请输入手机号" v-model="telephone">
                                </div>
                                <h4 class="slct-hd">Email </h4>
                                <div class="dob flatpickr">
                                    <input type="text" class="flatpickr-input"
                                           placeholder="请输入邮箱" v-model="email">
                                </div>
                                <div class="ch-pswd">
                                    <button type="submit" @click="updateUser()"> 提交</button>
                                </div>
                                <!--ch-pswd end-->
                            </div>
                            <!--account_details_content end-->
                            <div class="clearfix"></div>
                        </div>
                        <!--Account Details end-->
                    </div>
                    <!--video-details end-->
                </div>
            </div>
        </div>
    </section>
    <!--user-account end-->

</div>
<!--wrapper end-->


<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/flatpickr.js"></script>
<script src="js/script.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/header.js"></script>
<!--<script src="js/cookietool.js"></script>-->
<script>
    var app = new Vue({
        el: '#app',
    })
    var videoDeatils = new Vue({
        el: "#videoDetails",
        data() {
            return {
                ip: "localhost",
                videoInfo: null,
                "username": "cornpub1321",
                "nickname": "",
                "telephone": "",
                "gender": 1,
                "email": null,
                "region": "中国",
                "userImage": null,
                "lastloginTime": null,
                "signature": null,
                "createTime": null,
                user: null,
                index: [{
                    "indexId": 1,
                    "name": "中华人民共和国"
                }, {
                    "indexId": 2,
                    "name": "Commonwealth of Australia"

                }, {
                    "indexId": 3,
                    "name": "United States of America"
                }, {
                    "indexId": 4,
                    "name": "The Great Britain"
                }, {
                    "indexId": 5,
                    "name": "にほんこく"
                }, {
                    "indexId": 6,
                    "name": "대한민국"
                }, {
                    "indexId": 7,
                    "name": "조선민주주의인민공화국"
                }, {
                    "indexId": 8,
                    "name": "Российская Федерация"
                }, {
                    "indexId": 9,
                    "name": "Die Bundesrepublik Deutschland"
                }, {
                    "indexId": 10,
                    "name": "République française"
                }, {
                    "indexId": 11,
                    "name": "Repubblica Italiana"
                }, {
                    "indexId": 12,
                    "name": "República Portuguesa"
                }, {
                    "indexId": 13,
                    "name": "Reino de España"
                }, {
                    "indexId": 14,
                    "name": "भारत गणराज्य"
                }, {
                    "indexId": 15,
                    "name": "مملكة عربية سعودية"
                }, {
                    "indexId": 16,
                    "name": "ราชอาณาจักรไทย"
                }, {
                    "indexId": 18,
                    "name": "Cộng hòa Xã hội Chủ nghĩa Việt Nam"
                }, {
                    "indexId": 19,
                    "name": "Gônôprôjatôntri Bangladesh"
                }, {
                    "indexId": 20,
                    "name": "Koninkrijk der Nederlanden"
                }, {
                    "indexId": 21,
                    "name": "Rzeczpospolita Polska"
                }]
            }
        },
        created() {
            this.getUserInfo();
            this.loadVideoDeatils();
        },
        methods: {
            loadVideoDeatils() {
                console.log(this.getUid())
                axios.get("http://"+this.ip+":11001/api/video/detail/user/" + this.user.username,{params:{
                    "uid":this.getUid()
                }}).then(res => {
                    this.videoInfo = res.data.data
                    console.log(this.videoInfo)
                })
            },
            updateUser() {
                axios.put("http://"+this.ip+":11001/api/user/detail/" + this.user.username+"?uid="+this.getUid(),
                    {
                        "telephone": this.telephone,
                        "gender": this.gender,
                        "email": this.email,
                        "region": this.region,
                        "userImage": null,
                        "lastloginTime": new Date(),
                        "signature": null,
                        "createTime": null,
                        "oldPassword": "",
                        "newPassword": "",
                        "confirmPassword": ""
                    }
                ).then(res => {
                    console.log(res)
                })
            },
            indexSelect(event) {
                this.region = event.target.value
                consoloe.log(this.region)
            },
            getUserInfo() {
                if (JSON.parse(localStorage.getItem("user"))) {
                    this.user = JSON.parse(localStorage.getItem("user"))
                } else {
                    location.href = "login.html"
                }
                console.log(this.user.username)

            },
            changePsd() {
                axios.put("http://localhost:11001/api/user/" + this.user.username+"?uid="+this.getUid(), {
                    "oldPassword": this.oldPassword,
                    "newPassword": this.newPassword
                }).then(res => {

                })
            },
            getUid() {
                    return localStorage.getItem("uid");
            }
        }
    })
</script>


</body>

</html>
